import React, {useEffect,useState}from 'react';
import { getGoodApi } from "@api/homeApi";
import { StyledList } from "./StyledList";
import { withRouter } from "react-router-dom";
const Listcom = (props) => {
  const [arr,setArr]=useState([])
  useEffect(() => {
    getGoodApi().then(res=>{
      console.log(res);
      setArr(res.data)
    })

  },[]);
  const handerDetail=(item)=>{
  props.history.push('/detail/'+item.name)
  }

  return (
   <StyledList>{arr.map((item,index)=>{
     return <li key={index} onClick={()=>handerDetail(item)}>
     <img src={item.img} alt="" />
  <div>
  <h3>{item.name}</h3>
     <p>{item.burdens}</p>
     <span>{item.all_click}浏览 &nbsp;&nbsp;&nbsp;{item.favorites}收藏</span>
  </div>
     </li>
     
   })}</StyledList>
  );
}

export default withRouter(Listcom);

